In CSS, you can combine multiple pseudo-classes to apply styles to elements that satisfy all of the specified conditions simultaneously. This allows for more precise and dynamic styling.

How to Combine Pseudo-Classes

1
Chain pseudo-classes after a selector without spaces (e.g., a:hover:active).
2
You can mix structural and dynamic pseudo-classes (e.g., li:first-child:hover).
3
Pseudo-classes can also be combined with the :not() pseudo-class for exclusions.

Example: Using Multiple Pseudo-Classes

In this example, only the first list item changes color on hover. Checked checkboxes change accent color when hovered, and enabled buttons change background when hovered, showing how multiple pseudo-classes can work together.

Best Practices

1
Combine pseudo-classes logically to target elements accurately without adding extra HTML classes.
2
Keep chains readable and avoid over-complicating selectors.
3
Test combined pseudo-classes across browsers to ensure consistent behavior.
4
Use transitions to make dynamic changes smooth for better UX.

Difficulty: 3/10

Topics: pseudo-class chaining, specificity conflicts, hover-focus states

Scenario Questions

0-2 years experience

1
How would you style a button so it only shows a background color when the user hovers over it AND it’s focused, but not when it’s disabled?
2
What happens if you write .btn:hover:focus instead of .btn:focus:hover — does it matter, and why?
3
You have a list item that’s supposed to turn red when hovered and also be the first child — how would you write that selector?

2-5 years experience

1
A user reports that a form input’s focus state isn’t working when they tab to it — you notice it’s styled with :focus:hover, but the hover never triggers. What’s likely wrong?
2
You’re building a navigation menu where links should highlight on hover, but not if they’re the active page — how would you combine pseudo-classes to handle this without adding extra classes?
3
A component works fine in Chrome but breaks in Safari when using :nth-child(2n+1):not(.hidden) — what could be the issue, and how would you debug it?

5-8 years experience

1
You’re designing a reusable card component that needs to support complex state combinations like :hover:not(.loading):focus-visible — how do you ensure this doesn’t bloat your CSS or create specificity wars across teams?
2
A legacy UI has 20+ pseudo-class combinations scattered across files, causing unpredictable overrides. How would you refactor this for maintainability without breaking existing behavior?
3
How would you architect a design system where pseudo-class combinations are predictable across components, and how do you enforce that consistency at scale?

8+ years experience

1
You’re migrating a legacy CSS codebase that relies heavily on pseudo-class chains for state management — how do you decide whether to keep them, replace them with attributes, or move to a CSS-in-JS approach without breaking accessibility or performance?
2
How would you design a CSS architecture that allows product teams to safely extend pseudo-class combinations without introducing specificity conflicts, especially when teams use different styling methodologies?
3
When scaling a global design system, how do you balance the expressiveness of pseudo-class chaining against the risk of unintended side effects across thousands of components, and what tooling or governance do you put in place?

Follow-up Questions

❓What happens if you reverse the order of the pseudo-classes?
❓How would you debug a hover state that isn't triggering as expected?
❓Can you think of a case where combining pseudo-classes breaks in older browsers?